<template>
  <div class="invoiceManageFilter">
    <el-form ref="form" :inline="true" :model="formInline" class="form-inline" label-width="80px"
      @submit.native.prevent>
      <el-form-item label="分运单ID">
        <el-input v-model="formInline.yund_id" placeholder="输入分运单ID"></el-input>
      </el-form-item>
      <el-form-item label="状态">
        <el-select v-model="formInline.status" placeholder="选择状态">
          <el-option label="全部" value="0"></el-option>
          <el-option label="待申请" value="1"></el-option>
          <el-option label="申请中" value="2"></el-option>
          <el-option label="已开票" value="3"></el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="时间">
        <el-date-picker v-model="formInline.time" type="daterange" range-separator="至" start-placeholder="开始日期"
          end-placeholder="结束日期" value-format="yyyy-MM-dd"></el-date-picker>
      </el-form-item>
      <el-form-item label="发票号码">
        <el-input v-model="formInline.invoice_no" placeholder="输入发票号码"></el-input>
      </el-form-item>
      <el-form-item label="选择始发地" class="address">
        <el-cascader v-model="startAddress" :props="{ checkStrictly: true }" :options="regionData"
          style="width: 100%;" />
      </el-form-item>
      <el-form-item label="选择终点" class="address">
        <el-cascader v-model="endAddress" :props="{ checkStrictly: true }" :options="regionData" style="width: 100%;" />
      </el-form-item>
      <el-form-item label="搜索始发地">
        <el-input v-model="formInline.start_search" placeholder="输入始发地"></el-input>
      </el-form-item>
      <el-form-item label="搜索终点">
        <el-input v-model="formInline.end_search" placeholder="输入终点"></el-input>
      </el-form-item>
      <el-form-item class="btnItem">
        <el-button @click="resetTable">重置</el-button>
        <el-button class="btn" type="primary" @click="onSubmit" native-type="submit">查询</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { regionData } from "element-china-area-data";
import { getCodeToText } from '@/utils/tool'
export default {
  name: "payManageFilter",
  data() {
    return {
      regionData,
      formInline: {
        yund_id: "", //分运单id
        status: "0", //0全部1待申请2申请中3已开票
        time: "", //时间
        invoice_no: "", //发票号码
        start_province: "",//始发地省份
        start_city: "",//始发地市
        area: "",//始发地区
        end_province: "",//目的地省份
        end_city: "",//目的市
        end_area: "",//目的区
        start_search: "",//开始地区搜索
        end_search: "",//结束地区搜索
      },
      startAddress: "",//储存选择始发地
      endAddress: "",//储存选择终点
    };
  },
  watch: {
    startAddress: {
      handler(newV, oldV) {
        let res = getCodeToText(newV);
        this.formInline.start_province = '';
        this.formInline.start_city = '';
        this.formInline.sfd = '';

        if (newV.length >= 1) {
          this.formInline.start_province = res[0];
        }
        if (newV.length >= 2) {
          if (res[0].includes('市')) {
            this.formInline.start_city = res[0];
          } else {
            this.formInline.start_city = res[1].substring(0, res[1].length - 1);
          }
        }
        if (newV.length == 3) {
          this.formInline.sfd = newV[2]
        }
      }
    },
    endAddress: {
      handler(newV, oldV) {
        let res = getCodeToText(newV);
        this.formInline.end_province = '';
        this.formInline.end_city = '';
        this.formInline.zd = '';

        if (newV.length >= 1) {
          this.formInline.end_province = res[0];
        }
        if (newV.length >= 2) {
          if (res[0].includes('市')) {
            this.formInline.end_city = res[0];
          } else {
            this.formInline.end_city = res[1].substring(0, res[1].length - 1);
          }
        }
        if (newV.length == 3) {
          this.formInline.zd = newV[2]
        }
      }
    },
    'formInline.start_search': {
      handler(newV, oldV) {
        if (newV) {
          this.formInline.start_province = "";//始发地省份
          this.formInline.start_city = "";//始发地市
          this.formInline.area = "";//始发地区
          this.startAddress = '';
        }
      }
    },
    'formInline.end_search': {
      handler(newV, oldV) {
        console.log('触发');
        if (newV) {
          this.formInline.end_province = "";//始发地省份
          this.formInline.end_city = "";//始发地市
          this.formInline.end_area = "";//始发地区
          this.endAddress = '';
        }
      }
    }
  },
  mounted() { },
  methods: {
    resetTable() {
      this.$emit("filterTable", false);
      this.formInline = {
        yund_id: "", //分运单id
        status: "0", //0全部1待申请2申请中3已开票
        time: "", //时间
        invoice_no: "", //发票号码
        start_province: "",//始发地省份
        start_city: "",//始发地市
        area: "",//始发地区
        end_province: "",//目的地省份
        end_city: "",//目的市
        end_area: "",//目的区
        start_search: "",//开始地区搜索
        end_search: "",//结束地区搜索
      };
      this.startAddress = "";//储存选择始发地
      this.endAddress = ""//储存选择终点
    },
    onSubmit() {
      let ableFilter = false;
      for (let key in this.formInline) {
        let value = this.formInline[key];
        if (value) {
          ableFilter = true;
          break;
        }
      }
      if (ableFilter) {
        this.$emit("filterTable", {
          ...this.formInline,
          time: (this.formInline["time"] ? this.formInline["time"] : []).join("/")
        });
      } else {
        this.$emit("filterTable", false)
      }
    }
  }
};
</script>

<style lang="scss">
.invoiceManageFilter {
  .form-inline {
    display: flex;
    flex-wrap: wrap;

    .btnItem {
      flex: 1;
      display: flex;
      justify-content: flex-end;

      .el-form-item__content {
        width: auto !important;
      }

      .btn {
        margin-right: 22px;
      }
    }

    .el-form-item__label {
      // min-width: 80%;
      overflow: hidden;
      white-space: nowrap;
    }

    .el-date-editor--daterange {
      width: 100%;

      .el-range-separator {
        width: 10% !important;
      }
    }

    .el-input,
    .el-select {
      width: 100%;
    }

    .el-form-item {
      display: flex;
      width: 20%;
      margin-right: 0;

      .el-form-item__content {
        width: 70%;
      }
    }
  }
}
</style>